<template>
	<view
		class="btn"
		@click="clickBtn"
		:style="{ width: width }"
	>
		<slot></slot>
		{{ name }}
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watchEffect } from 'vue';
const props = defineProps({
	name: {
		type: String,
		required: true
	},
	//是否可点击
	disable: {
		type: Boolean,
		default: false
	},
	//背景色
	bgcColor: {
		type: String,
		default: '0E0E0E'
	},
	width: {
		type: String,
		default: '400rpx'
	}
});
const btnDisable = ref(false);

const emit = defineEmits(['clickBtn']);
const clickBtn = () => {
	emit('clickBtn');
};

watchEffect(() => {
	btnDisable.value = props.disable;
});
</script>

<style lang="scss" scoped>
.btn {
	width: 400rpx;
	background: #f3e0bb;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	font-size: 32rpx;
	color: #524630;
	line-height: 88rpx;
	letter-spacing: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.inActive {
	background-color: #f3e0bb;
	color: #524630;
}
</style>
